<template>
    <div class="line1">
        <div ref="lineChart" style="width: 100%;height:360px;"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: 'LineChart',
        data() {
            return {
                myChart: null,
            };
        },
        mounted(){
            this.myChart = echarts.init(this.$refs.lineChart);
            this.initData();
        },
        props: ['monthDate', 'monthDay'],
        methods: {
            initData(){
                const option = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monthDay
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '日营业额',
                            type:'line',
                            data: this.monthDate
                        }
                    ]
              };
                this.myChart.setOption(option);
            }
        },
        watch: {
            monthDate: function (){
                this.initData()
            },
            monthDay: function (){
                this.initData()
            }
        }
    }
</script>

<style scoped>
    .line1{
        display: flex;
        justify-content: center;
        padding-left: 50px;
    }
</style>
